<template>
    <div id="home">
        <nav-bar>
            <template v-slot:default>中心位置</template>
        </nav-bar>

        <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>


        <div class="wrapper">
            <div class="content">
                <div ref="banref">
                    <home-swiper style="margin-top: 0px" :banners="banners"></home-swiper>

                    <recommend-view :recommends="recommends"></recommend-view>

                </div>

                <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>

                <goods-list :goods='showGoods'></goods-list>
            </div>

        </div>

        <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
    </div>


</template>

<script>
import HomeSwiper from "@/views/home/ChildComps/HomeSwiper.vue";
import NavBar from "components/common/navbar/NavBar";
import RecommendView from "@/views/home/ChildComps/RecommendView.vue";
import TabControl from "@/components/content/tabControl/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import {getHomeAllData, getHomeGoods} from "@/network/home";
import {ref, reactive, onMounted, computed, watchEffect, nextTick} from "vue";
import BScroll from 'better-scroll';
import BackTop from "@/components/common/backtop/BackTop.vue";

export default {
    name: "Home",
    setup() {
        let banref = ref(null);
        let isShowBackTop = ref(false);
        let isTabFixed = ref(false);
        const recommends = ref([]);

        //商品列表数据模型
        const goods = reactive({
            sales: {page: 1, list: []},
            recommend: {page: 1, list: []},
            new: {page: 1, list: []},
        })

        let currentType = ref('sales');

        const showGoods = computed(() => {
            return goods[currentType.value].list;
        })
        let bscroll = reactive({})
        let banners = ref([]);

        onMounted(() => {
            getHomeAllData().then(res => { //获取首页所有数据
                recommends.value = res.goods.data  //获取首页推荐数据
                banners.value = res.slides;
            })
            getHomeGoods('sales').then(res => {
                goods.sales.list = res.goods.data
            });
            getHomeGoods('recommend').then(res => {
                goods.recommend.list = res.goods.data
            })
            getHomeGoods('new').then(res => {
                goods.new.list = res.goods.data
            })

            bscroll = new BScroll(document.querySelector('.wrapper'), {
                probeType: 3,   // 0，在任何时候都不派发 scroll 事件，
                // 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
                // 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
                // 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
                click: true,//是否允许点击
                pullUpLoad: true //上拉加载更多，默认false
            });

            bscroll.on('scroll', (position) => {
                // console.log(banref.value.offsetHeight);
                // bscroll.refresh();
                //   console.log(position.y)
                isShowBackTop.value = isTabFixed.value = banref.value && (-position.y) > banref.value.offsetHeight;
            })
            bscroll.on('pullingUp', () => {
                // console.log('上拉加载更多')

                const page = goods[currentType.value].page + 1;

                getHomeGoods(currentType.value, page).then(res => {
                    goods[currentType.value].list.push(...res.goods.data);
                    goods[currentType.value].page += 1;
                })

                //完成上拉、等数据请求完成、要将新数据展示出来
                bscroll.finishPullUp();

                //重新计算高度
                bscroll.refresh()
                // console.log(document.querySelector('.content').clientHeight)
                // console.log('当前类型' + currentType.value, '当前页' + page)


            })


        })
        const tabClick = (index) => {

            let types = ['sales', 'new', 'recommend'];

            currentType.value = types[index];
            nextTick(() => {
                //重新计算高度
                bscroll && bscroll.refresh();
            })
        }
        //监听 任何一个变量有变
        watchEffect(() => {
            nextTick(() => {
                //重新计算高度
                bscroll && bscroll.refresh();
            })
        })

        const bTop = () => {
            // console.log('111')
            bscroll.scrollTo(0, 0, 600)
        }

        return {
            recommends,
            tabClick,
            goods,
            showGoods,
            isTabFixed,
            banref,
            isShowBackTop,
            bTop,
            banners
        }

    },
    components: {
        HomeSwiper,
        NavBar,
        RecommendView,
        TabControl,
        GoodsList,
        BackTop

    },

}
</script>
<style scoped lang="scss">
.banners {
    width: 100%;
    height: 245px;
    overflow: hidden;
}

.banners img {
    width: 100%;
    height: 100%;
}

#home {
    height: 100vh;

    position: relative;
}

.wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0px;
    right: 0px;
    overflow: hidden;

}

.content {

}

</style>